<template>
  <div id="root">
    <es-router-view />
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from '@vue/runtime-core'
import {ESAppParams, ESLogLevel, useES, useESDevelop, useESDevice, useESLog, useESRuntime} from '@extscreen/es3-core'
import { ESApp } from '@extscreen/es3-vue'
import BuildConfig from "./build/BuildConfig";
import {__CONFIG__} from "./config/global";
import {ESPlayerConfiguration, ESPlayerDisplay, useESPlayer} from "@extscreen/es3-player";

export default defineComponent({
  name: 'App',
  setup() {
    const log = useESLog()
    const es = useES()
    const develop = useESDevelop()
    const device = useESDevice()
    const runtime = useESRuntime()
    const playerManager = useESPlayer()
    function onESCreate(app: ESApp, params: ESAppParams) {
      initESLog()
      if (BuildConfig.isUseMock){
        let userId=`${Math.floor(Math.random()*10)}`
        __CONFIG__.userInfoObj.userId=userId
        __CONFIG__.userInfoObj.nickname=userId
        console.log('userId:'+userId)
      }
      const playerDisplay: ESPlayerDisplay = {
        screenWidth: device.getScreenWidth(),//屏幕的宽度
        screenHeight: device.getScreenHeight(),//屏幕的高度
      }
      const config: ESPlayerConfiguration = {
        debug: true,
        display: playerDisplay,
        device: {
          deviceType: runtime.getRuntimeDeviceType() ?? ''//设备类型
        }
      }
      playerManager.init(config)
      return Promise.resolve()
    }
    function initESLog() {
      if (BuildConfig.debug) {
        log.setMinimumLoggingLevel(ESLogLevel.DEBUG)
      } else {
        log.setMinimumLoggingLevel(ESLogLevel.WARN)
      }
    }
    return {
      onESCreate,
    }
  }
})
</script>

<style scoped>
#root {
  width: 1920px;
  height: 1080px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
